{extend name="./app/admin/view/main.html" /}

{block name="title"}终端AccessKey管理  -{__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}

<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">终端AccessKey</h4> <h5 class="sub-title">终端Api访问的AccessKey设置</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='accessKeyAddDialog'>
            <span><Icon type="md-add"></Icon> 添加AccessKey</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <section class="mip-box-body">
            <section class="diy-table-list" v-cloak>

                <table class="table table-hover diy-table-list">
                    <thead>
                    <tr class="diy-table-item-header">
                        <th>ID</th>
                        <th>命名</th>
                        <th>终端类型</th>
                        <th>AccessKey</th>
                        <th style="width:120px">操作</th>
                    </tr>
                    </thead>

                    <tbody class="diy-table-body">
                    <template v-if='accessKeyList' v-for='(item,index) in accessKeyList'>
                        <tr class="tr1 diy-table-item">

                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.type}}</td>
                            <td>{{item.key}}</td>

                            <td>
                                <Button-Group size="small" shape="circle">
                                    <i-button type="success" @click="accessKeyEditDialog(index, item)">修改</i-button>
                                    <i-button type="warning" @click="accessKeyDel(index, item)">删除</i-button>
                                </Button-Group>
                            </td>

                        </tr>


                    </template>

                    <template v-if="accessKeyList.length==0">
                        <tr>
                            <td colspan="5" class="no-block">
                                <Icon type="ios-filing-outline"></Icon>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </template>
                    </tbody>

                </table>

            </section>
        </section>
    </section>
</main>
<Modal v-model="showDialog" size="large" v-cloak>
    <i-form :model="accessKey" :rules="formRules" ref="form" :label-width="80">
        <Tabs :animated='false' v-model="itemTabsValue">
            <Tab-Pane label="基础信息" name='default'>

                <Form-Item label="名称" prop="name">
                    <i-input v-model="accessKey.name" placeholder=""></i-input>
                    <span class="form-note"> </span>
                </Form-Item>
                <Form-Item label="类型" prop="type">
                    <i-input v-model="accessKey.type" placeholder=""></i-input>
                    <span class="form-note"> </span>
                </Form-Item>
                <Form-Item label="Key" prop="key">
                    <i-input v-model="accessKey.key" placeholder="32位随机字符串，支持大小写和数字">
                        <i-Button slot="append" class="tags-btn" @click='buildRand32'>随机生成</i-Button>
                    </i-input>
                    <span class="form-note"> </span>
                </Form-Item>


            </Tab-Pane>

        </Tabs>
    </i-form>
    <div slot="footer" class="dialog-footer">

        <i-button type="primary" @click="accessKeyPost">确 定</i-button>
        <i-button @click="showDialog = false">取 消</i-button>
    </div>
</Modal>

{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
            showDialog: false,
            dialogTitle: '',
            accessKey: {
                id: '',
                name: '',
                type: '',
                key: '',
                saveStatus: 'add',
            },
            formRules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                key: [{
                    required: true,
                    message: '请输入key',
                    trigger: 'blur'
                }],
            },
            accessKeyList: [],
            itemTabsValue: 'default',
        },
        watch: {},
        mounted() {
            this.getAccessKeyList();
        },
        methods: {
            accessKeyAddDialog: function () {
                this.accessKey.id = '';
                this.accessKey.name = '';
                this.accessKey.type = '';
                this.accessKey.key = '';
                this.accessKey.saveStatus = 'add';

                this.showDialog = true;
                this.dialogTitle = '添加AccessKey';
            },
            accessKeyPost(val, param) {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminAccessKey/save', this.accessKey).then(res => {
                            if (res.code == 1) {
                                this.showDialog = false;
                                this.$Message.success(res.msg);
                                this.getAccessKeyList();
                            }
                        });
                    }
                });
            },
            accessKeyDel(index, val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p style="color:#ff9900;">删除项：' + val.name + '</p><p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminAccessKey/del', {
                            id: val.id,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.getAccessKeyList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getAccessKeyList: function () {
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminAccessKey/accessKeyList', {}).then(res => {
                    if (res.code == 1) {
                        var list = res.data.list;
                        this.accessKeyList = list;
                    }
                });
            },
            accessKeyEditDialog(index, row) {
                this.accessKey.id = row.id;
                this.accessKey.name = row.name;
                this.accessKey.type = row.type;
                this.accessKey.key = row.key;
                this.accessKey.saveStatus = 'edit';

                this.showDialog = true;
                this.dialogTitle = '编辑AccessKey';
            },
            buildRand32(){
                var rnd = '';
                var str='abcdefghijklmnopqrstuvwxyzAbcDfGijKnMnopqrStuvvxYZ0123456789';
                for(var i=0;i<32;i++){
                    var c = str.substr(Math.random()*(str.length),1);
                    rnd+=c;
                }
                this.accessKey.key = rnd
            }

        }
    })
</script>
{/block}